<template>
  <div class="userRead-container">
    <div class="userRead-top">
      <my-input :placeholder="placeholder" @search="mySearch"></my-input>
      <el-form ref="form" :model="form" label-width="80px" style="margin-top: 20px">
        <el-form-item label="类型筛选：" style="white-space: nowrap">
          <el-select v-model="bookType" placeholder="请选择活动区域" @change="selectedBookType">
            <el-option
              v-for="item in optionsBookType"
              :key="item.id"
              :label="item.type_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column width="80px" type="index" label="序号"></el-table-column>
        <el-table-column width="120px" label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.user_avatar" alt class="people-avatar" />
          </template>
        </el-table-column>
        <el-table-column width="120px" prop="user_nickname" label="昵称"></el-table-column>
        <el-table-column width="120px" prop="book_name" label="书籍名称"></el-table-column>
        <el-table-column width="120px" label="书籍封面">
          <template slot-scope="scope">
            <img :src="scope.row.book_cover" alt class="book-avatar" />
          </template>
        </el-table-column>
        <el-table-column width="120px" prop="type_name" label="书籍类型"></el-table-column>
        <el-table-column width="120px" prop="read_people" label="陪读人"></el-table-column>

        <el-table-column width label="推荐指数">
          <template slot-scope="scope">
            <van-rate v-model="scope.row.recommend_points" :size="25" void-icon="star" />
          </template>
        </el-table-column>
        <el-table-column width prop="readings" label="读书心得"></el-table-column>
        <el-table-column width prop="updated_at" label="提交时间"></el-table-column>
      </el-table>
    </div>
    <Pagination
      :pageSize="pageSize"
      :total="total"
      :currentPage="currentPage"
      class="pagination"
      @currentChange="currentChange"
    ></Pagination>
  </div>
</template>
<script>
import MyInput from "@/common/input/index";
import { readingDiaryList, chooseBookType } from "@/api/operation";
import { ERR_OK } from "@/api/config";
import Pagination from "@/common/pagination/pagination";
export default {
  data() {
    return {
      placeholder: '请输入书籍名称',
      bookType: "",
      optionsBookType: [],
      recommend_points: 5,
      form: {
        type: ""
      },
      tableData: [],
      page: 1,
      pageSize: 9,
      total: 0,
      currentPage: 1,
      book_type_id: undefined,
      book_name: undefined
    };
  },
  methods: {
    mySearch(name) {
      this.book_name = name
      this.page = 1
      this.currentPage = 1
      this._readingDiaryList(this.page, this.book_name, this.book_type_id)
    },
    selectedBookType(id) {
      this.page = 1
      this.currentPage = 1
      this.book_type_id = id
      this._readingDiaryList(this.page, this.book_name, this.book_type_id)
    },
    currentChange(val) {
      this.page = val;
      this._readingDiaryList(this.page);
    },
    _readingDiaryList(page, book_name, book_type_id) {
      readingDiaryList(page, book_name, book_type_id)
        .then(res => {
          if (res.code == ERR_OK) {
            // console.log(res);
            let ret = res.data.list;
            this.tableData = ret.data;
            this.total = res.data.total;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    _chooseBookType() {
      chooseBookType()
        .then((res) => {
          if (res.code == ERR_OK) {
            // console.log(res)
            this.optionsBookType = res.data
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  },
  created() {
    this._readingDiaryList(this.page);
    this._chooseBookType()
  },
  components: {
    MyInput,
    Pagination
  }
};
</script>
<style lang="scss" scoped>
@import "@/common/scss/index.scss";
.userRead-container {
  width: 100%;
  padding: 20px;
  padding-top: 50px;
  margin-bottom: 30px;
  .userRead-top {
    width: 100%;
    height: 76px;
    display: flex;
    align-items: center;
    vertical-align: middle;
  }
  .table {
    margin-bottom: 20px;
    .el-table /deep/ .has-gutter {
      th {
        text-align: center;
      }
    }
    .el-table /deep/ .el-table__row {
      td {
        .cell {
          text-align: center;
        }
      }
    }
  }
}
.pagination {
  @include hCenter();
}
.people-avatar {
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.book-avatar {
  display: inline-block;
  width: 58px;
  height: 71px;
}
</style>
